<drag-and-drop
  :enabled="!landingVisible"
  v-on:drop="openFiles"
>
  <v-app slot-scope="{ dragHover }">
    <!-- 960 is vuetify's md breakpoint -->
    <v-navigation-drawer
      v-model="controlsDrawer"
      :clipped="$vuetify.breakpoint.mdAndUp"
      mobile-break-point="960"
      app
      fixed
      disable-resize-watcher
      touchless
    >
      <controls-drawer />
    </v-navigation-drawer>

    <v-toolbar
      clipped-left
      app
    >
      <v-toolbar-side-icon
        :disabled="landingVisible"
        @click.native.stop="controlsDrawer = !controlsDrawer"
      />
      <!-- smaller than height of the toolbar -->
      <v-tooltip
        bottom
        :disabled="smallScreen"
      >
        <a
          slot="activator"
          href="#"
          v-on:click.prevent="toggleLanding"
        >
          <svg-icon
            :icon="iconLogo"
            height="52px"
            style="margin-top: 6px"
          />
        </a>
        <span v-if="landingVisible" key="if-landingVisible">Go to app</span>
        <span v-else key="if-landingVisible">Back to landing page</span>
      </v-tooltip>
      <v-spacer />
      <v-btn
        v-if="errors.length"
        key="if-has-errors"
        :class="$style.toolbarButton"
        flat
        color="error"
        v-on:click="errorDialog = true"
      >
        <v-icon>error</v-icon>
        <span>{{ errors.length }}</span>
        <span v-show="!smallScreen">error(s)</span>
      </v-btn>
      <v-btn
        :class="$style.toolbarButton"
        flat
        v-on:click="promptUserFiles"
      >
        <v-icon>folder</v-icon>
        <span v-show="!smallScreen">Open</span>
      </v-btn>
      <v-btn
        v-show="!landingVisible"
        :class="$style.toolbarButton"
        flat
        v-on:click="saveState()"
      >
        <v-icon>cloud_download</v-icon>
        <span v-show="!smallScreen">Save state</span>
      </v-btn>
      <v-btn
        v-show="!landingVisible"
        :class="$style.toolbarButton"
        flat
        v-on:click="screenshotsDrawer = true"
      >
        <v-icon>collections</v-icon>
        <span v-show="!smallScreen">Screenshots ({{ screenshotCount }})</span>
      </v-btn>
      <v-btn
        :class="$style.toolbarButton"
        flat
        v-on:click="aboutDialog = true"
      >
        <!-- width of other icons in toolbar -->
        <svg-icon icon="kitware-logo" width="24px" />
        <span v-show="!smallScreen">About</span>
      </v-btn>
    </v-toolbar>

    <v-content :class="$style.appContent">
      <landing
        v-if="landingVisible"
        key="if-landing"
        v-on:open="promptUserFiles"
        v-on:open-urls="openSample"
        v-on:open-files="openFiles"
      />
      <layout-view
        v-else
        key="if-landing"
        :widgetManager="widgetManager"
      />
    </v-content>

    <v-navigation-drawer
      v-model="screenshotsDrawer"
      :stateless="screenshotsDrawerStateless"
      app
      right
      temporary
      touchless
    >
      <screenshots
        v-on:screenshot-count="screenshotCount = $event"
        v-on:close="screenshotsDrawer = false"
      />
    </v-navigation-drawer>

    <!-- file loader -->
    <file-loader v-on:load="showApp" />

    <!-- state generator -->
    <state-file-generator />

    <!-- dnd overlay -->
    <div
      :class="{ [$style.overlay]: true, [$style.overlayVisible]: dragHover }"
    >
      <div :class="$style.overlayText">
        <div class="display-3">Drop files here</div>
        <v-icon
          class="display-4"
          :class="$style.noTransition"
        >
          publish
        </v-icon>
      </div>
    </div>

    <!-- browser issues -->
    <browser-issues />

    <!-- about dialog -->
    <component
      :is="dialogType"
      v-model="aboutDialog"
      max-width="50%"
    >
      <about-box v-on:close="aboutDialog = false" />
    </component>

    <!-- error dialog-->
    <component
      :is="dialogType"
      v-model="errorDialog"
      max-width="50%"
    >
      <error-box :errors="errors" v-on:close="errorDialog = false" />
    </component>
  </v-app>
</drag-and-drop>
